<template>
  <div>
    <el-form :model="form">
      {{ form }}
      <el-form-item
        label="活动名称"
        label-width="120px"
        :rules="[{ required: true }]"
      >
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="活动期限" label-width="120px">
        <template>
          <div class="block">
            <el-date-picker
              v-model="value"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="chaneDate"
            >
            </el-date-picker>
          </div>
        </template>
      </el-form-item>
      <el-form-item label="一级分类" label-width="120px">
        <el-select
          v-model="form.first_cateid"
          placeholder="请选择一级分类"
          @change="changeFirstCateId"
        >
          <!--6.遍历分类数据  -->
          <el-option
            v-for="item in cate_Arr"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" label-width="120px">
        <el-select
          v-model="form.second_cateid"
          placeholder="请选择二级分类"
          @change="changeSecondCateId"
        >
          <!--9.遍历secondCateList  -->
          <el-option
            v-for="item in secondCateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" label-width="120px">
        <el-select
          v-model="form.goodsid"
          placeholder="请选择商品"
          v-if="goods_Arr"
        >
          
          <el-option
            v-for="item in goods_Arr"
            :key="item.id"
            :label="item.goodsname"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select v-model="form.goodsid" placeholder="暂无该类商品" v-else></el-select>
      </el-form-item>
      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <el-form-item label-width="120px">
        <el-button type="primary" @click="commit">{{
          $route.path == "/seckill/add" ? "添加" : "修改"
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqseckadd, reqseckedit, reqseckinfo } from "../../../http/api";
import { errorAlert, successAlert } from "../../../utils/alert";
export default {
  computed: {
    ...mapGetters({
      cate_Arr: "cate/cate_Arr",
      goods_Arr: "goods/goods_Arr",
    }),
  },
  data() {
    return {
      form: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      },
      secondCateList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: [],
    };
  },
  activated() {
    this.set_cateArr({ istree: true });
    if (this.$route.path !== "/seckill/add") {
      // console.log(this.$route);
      this.isshow = true;
      reqseckinfo({ id: this.$route.params.id })
        .then((res) => {
          if (res.data.code === 200) {
            this.form = res.data.list;
            this.getSecondCateList();
            this.getGoods();
            this.value.push(new Date(Number(this.form.begintime)));
            this.value.push(new Date(Number(this.form.endtime)));
          };
        })
        .catch((err) => {
          console.log("请求失败-----err:" + err);
        });
    }
  },
  beforeRouteLeave(to, from, next) {
    this.imgUrl = "";
    // console.log(to,from);
    if (from.path !== "/seckill/add") {
      this.form = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      };
      this.value=[];
      this.secondCateList=[];
    }
    next();
  },

  methods: {
    ...mapActions({
      set_cateArr: "cate/set_cateArr",
      set_goodsArr: "goods/set_goodsArr",
    }),

    changeFirstCateId() {
      this.form.second_cateid = "";
      this.form.goodsid = "";
      this.getSecondCateList();
    },
    getSecondCateList() {
      let obj = this.cate_Arr.find((item) => {
        return item.id == this.form.first_cateid;
      });
      this.secondCateList = obj ? obj.children : [];
    },
    changeSecondCateId() {
      this.form.goodsid = "";
      this.getGoods();
    },
    getGoods() {
      this.set_goodsArr({
        fid: this.form.first_cateid,
        sid: this.form.second_cateid,
      });
    },
    chaneDate(){
      // console.log(this.value);
      // 将时间选择器选择时间转换成时间戳
      this.form.begintime = new Date(this.value[0]).getTime();
      this.form.endtime = new Date(this.value[1]).getTime();

      console.log(this.form.begintime,this.form.endtime);
    },
    commit() {
      if (this.$route.path === "/seckill/add") {
        reqseckadd(this.form).then((res) => {
          if (res.data.code === 200) {
            //弹成功
            successAlert(res.data.msg);
            this.form = {
              title: "",
              begintime: "",
              endtime: "",
              first_cateid: "",
              second_cateid: "",
              goodsid: "",
              status: 1,
            };
            this.value=[];
            this.secondCateList=[];
            //返回菜单管理
            this.$router.push("/seckill");
          }
        });
      } else {
        this.form.id = this.$route.params.id;
        reqseckedit(this.form).then((res) => {
          if (res.data.code === 200) {
            //弹成功
            successAlert(res.data.msg);
            //返回菜单管理
            this.$router.push("/seckill");
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
@import url("../../../less/index.less");
.avant {
  float: left;
  width: 80px;
  height: 80px;
  border: 1px dashed @bg-deep;
  border-radius: @padding10;
  text-align: center;
  line-height: 45px;
  position: relative;
  overflow: hidden;
  margin-left: @padding10;
  input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  img {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
}
</style>